<template>
    <div class="wrapper" :class="cname" v-if="items.length>0">
        <swiper :options="swiperOption" ref="swiperOption">
            <swiper-slide v-for="(item, index) in items" :key="index">
                <slot :src="item"></slot>
            </swiper-slide>
            <div class="swiper-pagination" v-if="swiperOption.pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
export default {
  name: "sliderComponent",
  props: {
      cname: {
          type: String,
          default: ""
      },
      swiperOption: {
          type: Object,
          default () {
              return {
                  loop: true,
                  autoplay: {
                      delay: 3000,
                      disableOnInteraction: false,
                      stopOnLastSlide: false
                  },
                  
                  pagination: {
                      el: '.swiper-pagination'
                  },
                  observeParents:true,
                  observer:true                 
              }
          }
      },
      items: {
          type: Array,
          default ( ) {
              return []
          }
      }
  },
  components: {
    swiper,
    swiperSlide
  },
  beforeDestroy ( ) {
      if( document.querySelector('.swiper-pagination-fraction') ) {
        document.querySelector('.swiper-pagination-fraction').style = "width:0.8rem;height:0.4rem;line-height:0.4rem;font-size:0.26rem;bottom:0.1rem;right:0.1rem;left:auto;background-color:#333;color:#fff;border-radius:0.2rem;"
      }
  }  
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-container
  width 100%
  padding-bottom 46.66666666666667%
  height  0
  overflow hidden
.wrapper >>> .swiper-pagination-bullet-active
  background #fff
.wrapper >>> .swiper-container-horizontal > .swiper-pagination-bullets
  bottom -6px
.wrapper >>> .swiper-slide
  width 100%
  padding-bottom 46.66666666666667%
  height  0
  overflow hidden
.wrapper
  width 100%
  height 0
  overflow hidden
  padding-bottom 46.66666666666667%
  .swiper-img
    width 100%
    display block
    overflow hidden
    padding-bottom  46.66666666666667%
    background-repeat no-repeat
    background-position center
    background-size cover
.swiper-pagination-fraction
    bottom 5px
    right 5px
    left auto
    width 40px
    height 20px
    line-height 20px
    font-size 13px
    color #fff
    background-color #333
    border-radius 10px
@import "~@/assets/css/swiperCustom.styl"
</style>
